<template>
	<view class="content">
		<view class="box">
			<!-- 输入费用 -->
			<view class="money-input">
				<!-- 图片上传 -->
				<view class="money-input-item-p">
					<view class="title">
						<text>图片</text>
					</view>
					<view class="photo">
						<image v-if="form.part_image" @click="upload()" :src="'https://zl.gxhlkj.cn/'+form.part_image" mode=""></image>
						<button v-else @click="upload()" type="default">点击上传</button>
						<!-- <text>点击上传</text> -->
					</view>
					
				</view>
				<!-- 成本价格 -->
				<view class="money-input-item">
					<text>
						<text class="cuIcon-rechargefill" style="color: #ffa23e;margin-right: 10rpx;"></text>
						<text>成本价</text>
					</text>
					<input v-if="isCost" type="text" @input="ruleFee('cost')" @blur="ruleBlur('cost')" :focus="isCost" v-model="form.cost"  maxlength="10" :placeholder="TIP" />
					<text v-else @click="toInput('cost')" style="color: #808080;height: 45rpx;" class="input"> {{form.cost||TIP}} </text>
				</view>
				<!-- 销售价 -->
				<view class="money-input-item">
					<text>
						<text class="cuIcon-rechargefill" style="color: #ffa23e;margin-right: 10rpx;"></text>
						<text>销售价</text>
					</text>
					<input v-if="isSale" type="text" @input="ruleFee('sale')" @blur="ruleBlur('sale')" :focus="isSale" v-model="form.sale"  maxlength="10" :placeholder="TIP" />
					<text v-else @click="toInput('sale')" style="color: #808080;font-size: 29rpx;" class="input">{{form.sale||TIP}}</text>
				</view>
				<view class="money-input-item">
					<text>
						<text>零件名称</text>
					</text>
					<input type="text" v-model="form.part_name" maxlength="10"  placeholder="请输入零件名称" />
				</view>
				<view class="money-input-item">
					<view>
						<text>数量</text>
					</view>
					<!-- <input type="text" v-model="form.part_name" maxlength="10"  placeholder="请输入零件名称" /> -->
					<view class="money-num">
						<text @tap="num--" style="background-color: #e1e1e1;width: 60rpx;">-</text>
						<text>{{form.num}}</text>
						<text @tap="num++" style="background-color: #e1e1e1;width: 60rpx;">+</text>
					</view>
				</view>
				<!-- // 添加按钮 -->
				<view class="money-input-item-b">
					<view @tap="add">添加</view>
				</view>
			</view>
			<!-- 费用列表展示 -->
			<view class="money-list">
				<view class="money-head">
					<text>工具零件列表</text>
				</view>
				<view class="money-body">
					<view class="money-item"  v-for="(i,j) in moneyList" :key="j">
						<view>
							<!-- <text type="default" class="jian" @click="removeM(j)">-</text> -->
							<!-- <button type="default">-</button> -->
							<image @tap="look(i.part_image)" v-if="i.part_image" :src="'https://zl.gxhlkj.cn/'+i.part_image" mode=""></image>
							<image v-else src="../../../../static/errorr.png" mode=""></image>
							<text>{{i.part_name}}</text>
							<text style="margin: 0 10rpx;">x</text>
							<text>{{i.num}}</text>
						</view>
						<view class="price">
							<text style="color: #aaa;">成本价：{{i.cost}}元</text>
							<text style="color: #aaa;">销售价：{{i.sale}}元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="money-list-all">
				<view>
					<text>总成本价</text>
					<text>￥</text>
					<text style="font-size: 32rpx;margin-left: 10rpx;color: #ffa23e;">{{all_cost}}</text>
				</view>
				<view>
					<text>总销售价</text>
					<text>￥</text>
					<text style="font-size: 32rpx;margin-left: 10rpx;color: #e54d42;">{{all_sale}}</text>
				</view>
			</view>
			<!-- <view class="money-button">
				<view>
					<text>提交</text>
				</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	import api from "../../../../network/index.js"
	export default {
		data() {
			return {
				TIP: "保留两位小数（单位/元）",
				// 表单数据
				form:{
					order_service_id: "",
					cost: "",// 成本价
					sale: "",// 销售价
					part_name: "",// 零件名称
					part_image: "",
					num: 1
				},
				num: 1,
				// 是否获得焦点
				isCost: false,
				isSale: false,
				// 零件列表
				moneyList:[]
			};
		},
		watch:{
			num(){
				if(this.num<=0){
					this.num = 1
				} else if(this.num>=100){
					this.num = 100
				}
				this.form.num = this.num
			}
		},
		computed:{
			all_cost(){
				let num=0;
				if(this.moneyList.length&&this.moneyList.length>0){
					for(let i =0;i<this.moneyList.length;i++){
						num+=(this.moneyList[i].cost-0)
					}
				} 
				return num
			},
			all_sale(){
				let num=0;
				if(this.moneyList.length&&this.moneyList.length>0){
					for(let i =0;i<this.moneyList.length;i++){
						num+=(this.moneyList[i].sale-0)
					}
				} 
				return num
			}
		},
		methods:{
			// 查看大图
			look(url){
				uni.previewImage({
					urls: [].push(api.SERVER+url)
				})
			},
			// 格式化费用
			ruleFee(type){
				// 只能输入数字和小数点，小数点后两位的数全不不保留
				if(type=="cost"){
					this.form.cost=""+this.form.cost.replace(/[^\d\.]/g,'')
					if(this.form.cost.indexOf('.')!=-1) this.form.cost = this.form.cost.substring(0,this.form.cost.indexOf('.')+3)
				} else if(type=="sale"){
					this.form.sale=""+this.form.sale.replace(/[^\d\.]/g,'')
					if(this.form.sale.indexOf('.')!=-1) this.form.sale = this.form.sale.substring(0,this.form.sale.indexOf('.')+3)
				}
			},
			// 失去焦点
			ruleBlur(type){
				if(type=="cost")this.isCost=false
				if(type=="sale")this.isSale=false
			},
			toInput(type){
				if(type=="cost")this.isCost=true
				if(type=="sale")this.isSale=true
			},
			init(){
				this.form = {
					order_service_id: this.form.order_service_id,
					cost: "",// 成本价
					sale: "",// 销售价
					part_name: "",// 零件名称
					part_image: "",
					num: 1
				}
				this.getPartList(this.form.order_service_id)
			},
			// 添加费用
			add(){
				const t = this
				// 判断用户是否输入
				if(!this.form.cost){
					uni.showToast({
						icon:"none",
						title:"请输入成本价~"
					})
				} else if(!this.form.sale){
					uni.showToast({
						icon:"none",
						title:"请输入销售价~"
					})
				} else if(!this.form.part_name){
					uni.showToast({
						icon:"none",
						title:"请输入零件名称~"
					})
				} else {
					uni.showModal({
						title:"确认添加该配件吗?",
						complete(res) {
							if(res.confirm){
								console.log(t.form)
								api.request({
									url: api.SERVICE_PART_ADD,
									data: t.form
								}).then(res=>{
									console.log(res)
									uni.showToast({
										icon: "none",
										title: "添加成功~"
									})
									t.init()
								})
								return
							}
						}
					})
				}
			},
			// 删除
			removeM(index){
				this.moneyList = this.moneyList.filter((i,j)=>j!=index)
				uni.showToast({
					icon: "none",
					title: "删除成功~"
				})
			},
			// 读取配件列表
			getPartList(id){
				api.request({
					url: api.SERVICE_PART,
					data:{
						order_service_id: "=,"+id
					}
				}).then(res=>{
					// console.log(res)
					if(res.data.list=="暂无数据")return
					if(res.data.code == "200"){
						console.log(res)
						let data = res.data.list.data
						this.moneyList = data
					}else{
						api.error(err)
					}
				}).catch(err=>{
					api.error(err)
				})
			},
			// 上传文件
			upload(){
				const t = this
				uni.chooseImage({
					count: 1,
					type: "image",
					complete(res) {
						console.log(res)
						let url = res.tempFilePaths[0]
						 uni.uploadFile({
							url: api.UPLOAD,
							filePath: url,
							name: "file",
							complete: (option) => {
								console.log(option)
								t.form.part_image = JSON.parse(option.data)[0]
							},
							success: (option) => {
							}
						});
					}
				})
			}
		},
		onLoad(res) {
			this.form.order_service_id = res.id
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
.money-num{
	flex: 1;
	text-align: center;
	text{
		display: inline-block;
		margin: 0 40rpx;
	}
}
.money-input-item-p{
	display: flex;
	align-items: center;
	padding: 20rpx;
	.title{
		width: 140rpx;
	}
	.photo{
		flex: 1;
		text-align: center;
		button{
			font-size: 32rpx;
		}
		image{
			width: 300rpx;
			height: 300rpx;
			vertical-align: middle;
		}
	}
}
.money-button{
	view{
		margin: 40rpx 80rpx;
		background-color: #4cd964;
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 20rpx;
	}
}
.money-list-all{
	margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	height: 88rpx;
	line-height: 88rpx;
}
.money-list{
	.money-head{
		padding: 20rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.money-item{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #EEEEEE;
		image{
			margin-right: 20rpx;
			width: 80rpx;
			height: 80rpx;
			vertical-align: middle;
		}
		.jian{
			margin-right: 20rpx;
			display: inline-block;
			width: 50rpx;
			text-align: center;
			// height: 50rpx;
			background-color: #e54d42;
			color: #FFFFFF;
			border-radius: 10rpx;
		}
		.price{
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
		}
	}
}
.money-input{
	.money-input-item{
		padding: 20rpx;
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
		text{
			width: 140rpx;
		}
		input,.input{
			flex: 1;
			background-color: #ffffee;
			padding: 0 20rpx;
		}
	}
	.money-input-item-b{
		view{
			margin: 20rpx 160rpx;
			background-color: #cce6ff;
			color: #333;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 10rpx;
			box-shadow: 2rpx 2rpx 4rpx #EEEEEE;
		}
		border-bottom: 1rpx solid #EEEEEE;
		box-shadow: 4rpx 4rpx 8rpx #EEEEEE;
	}
}
.content{
}
.box{
	padding-bottom: 40rpx;
	margin: 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #EEEEEE;
}
</style>
